<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Js API | Saturday_</title><meta name="keywords" content="js,javascript,api"><meta name="author" content="HHR"><meta name="copyright" content="HHR"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="DOM 操作webapi 介绍api 的概念API（ Application Programming Interface , 应用程序编程接口 ）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()任何开发语言都有自己的">
<meta property="og:type" content="article">
<meta property="og:title" content="Js API">
<meta property="og:url" content="https://codehhr.cn/2021/05/19/js/js-api/index.html">
<meta property="og:site_name" content="Saturday_">
<meta property="og:description" content="DOM 操作webapi 介绍api 的概念API（ Application Programming Interface , 应用程序编程接口 ）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：alert()、 prompt()、log()、reverse()、getMonths()任何开发语言都有自己的">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg">
<meta property="article:published_time" content="2021-05-19T15:13:26.000Z">
<meta property="article:modified_time" content="2021-07-03T03:30:56.544Z">
<meta property="article:author" content="HHR">
<meta property="article:tag" content="js">
<meta property="article:tag" content="javascript">
<meta property="article:tag" content="api">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg"><link rel="shortcut icon" href="/img/favicon.ico"><link rel="canonical" href="https://codehhr.cn/2021/05/19/js/js-api/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":2,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"简"},
  noticeOutdate: {"limitDay":680,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: false
  },
  runtime: '天',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: {"limitCount":50,"languages":{"author":"作者: HHR","link":"链接: ","source":"来源: Saturday_","info":"著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}},
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"top-center"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: true,
  isanchor: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'Js API',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-07-03 11:30:56'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const fontSizeVal = saveToLocal.get('global-font-size')
    if (fontSizeVal !== undefined) {
      document.documentElement.style.setProperty('--global-font-size', fontSizeVal + 'px')
    }
    
    const detectApple = () => {
      if (GLOBAL_CONFIG_SITE.isHome && /iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><script src="/js/jquery.min.js"></script><link rel="stylesheet" href="/css/cursor.css"><link rel="stylesheet" href="/css/footergradient.css"><link rel="stylesheet" href="/css/scrollbar.css"><link rel="stylesheet" href="/css/animate.min.css"><meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/atom.xml" title="Saturday_" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="onerror=null;src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/archives/"><div class="headline">文章</div><div class="length-num">87</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/tags/"><div class="headline">标签</div><div class="length-num">120</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/categories/"><div class="headline">分类</div><div class="length-num">31</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-image"></i><span> 照片</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/school/"><i class="fa-fw fas fa-graduation-cap"></i><span> 科大</span></a></li><li><a class="site-page child" href="/wallpaper/"><i class="fa-fw fas fa-image"></i><span> 壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/messageboard/"><i class="fa-fw fas fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/csslayouts/sunrise.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Saturday_</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fas fa-image"></i><span> 照片</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/school/"><i class="fa-fw fas fa-graduation-cap"></i><span> 科大</span></a></li><li><a class="site-page child" href="/wallpaper/"><i class="fa-fw fas fa-image"></i><span> 壁纸</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div><div class="menus_item"><a class="site-page" href="/messageboard/"><i class="fa-fw fas fa-paper-plane"></i><span> 留言板</span></a></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa fa-list"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Js API</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2021-05-19T15:13:26.000Z" title="发表于 2021-05-19 23:13:26">2021-05-19</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-07-03T03:30:56.544Z" title="更新于 2021-07-03 11:30:56">2021-07-03</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/js/">js</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">5.6k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>24分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="Js API"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="DOM-操作"><a href="#DOM-操作" class="headerlink" title="DOM 操作"></a>DOM 操作</h1><h1 id="webapi-介绍"><a href="#webapi-介绍" class="headerlink" title="webapi 介绍"></a>webapi 介绍</h1><h2 id="api-的概念"><a href="#api-的概念" class="headerlink" title="api 的概念"></a>api 的概念</h2><p><code>API</code>（ Application Programming Interface , 应用程序编程接口 ）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。例如：<code>alert()</code>、 <code>prompt()</code>、<code>log()</code>、<code>reverse()</code>、<code>getMonths()</code><br>任何开发语言都有自己的 <code>API</code><br><code>API</code> 的特征输入和输出( I/O )<br><code>API</code> 的使用方法( <code>console.log()</code> )</p>
<h2 id="webapi-的概念"><a href="#webapi-的概念" class="headerlink" title="webapi 的概念"></a>webapi 的概念</h2><p>浏览器提供的一套操作浏览器功能和页面元素的 <code>API</code> ( <code>BOM</code> 和 <code>DOM</code> )<br>我们可以通过 <code>API</code> 去操作 <code>DOM</code> 和 <code>BOM</code><br>此处的 web <code>API</code> 特指浏览器提供的 <code>API</code>(一组方法)，web <code>API</code> 在后面的课程中有其它含义</p>
<h2 id="JavaScript-的组成"><a href="#JavaScript-的组成" class="headerlink" title="JavaScript 的组成"></a>JavaScript 的组成</h2><p><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/jscontent.png" alt="js"></p>
<h1 id="DOM-概念"><a href="#DOM-概念" class="headerlink" title="DOM 概念"></a>DOM 概念</h1><p><strong>了解</strong></p>
<p>事件基础文档对象模型（Document Object Model，简称 <code>DOM</code>），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为 <code>DOM</code>。Document Object Model 的历史可以追溯至 1990 年代后期微软与 Netscape 的“浏览器大战”，双方为了在 <code>JavaScript</code> 与 <code>JScript</code> 一决生死，于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物，既有 VBScript、ActiveX、以及微软自家的 DHTML 格式等，使不少网页使用非微软平台及浏览器无法正常显示。DOM 即是当时蕴酿出来的杰作。</p>
<p><code>DOM</code> 又称为文档树模型</p>
<p><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/dom.jpeg" alt="DOM"></p>
<p>文档：一个网页可以称为文档<br>节点：网页中的所有内容都是节点（标签、属性、文本、注释等）<br>元素：网页中的标签<br>属性：标签(元素)的属性</p>
<h1 id="模拟文档树结构"><a href="#模拟文档树结构" class="headerlink" title="模拟文档树结构"></a>模拟文档树结构</h1><p><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/simulationdom.jpeg" alt="simulationdom"></p>
<h1 id="操作-DOM"><a href="#操作-DOM" class="headerlink" title="操作 DOM"></a>操作 DOM</h1><h2 id="获取元素的方式"><a href="#获取元素的方式" class="headerlink" title="获取元素的方式"></a>获取元素的方式</h2><h3 id="根据-id-获取元素"><a href="#根据-id-获取元素" class="headerlink" title="根据 id 获取元素"></a>根据 id 获取元素</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> div1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;box1&quot;</span>);</span><br></pre></td></tr></table></figure>

<h3 id="通过类名获取元素"><a href="#通过类名获取元素" class="headerlink" title="通过类名获取元素"></a>通过类名获取元素</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> p1 = <span class="built_in">document</span>.getElementsByClassName(<span class="string">&quot;p1&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Array</span>.isArray(p1)); <span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(p1.length);</span><br><span class="line"><span class="built_in">console</span>.log(p1[<span class="number">0</span>]);</span><br><span class="line"><span class="built_in">console</span>.log(p1[<span class="number">1</span>]);</span><br></pre></td></tr></table></figure>

<p><strong>伪数组定义</strong>：</p>
<p>1、拥有 <code>length</code> 属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)<br>2、不具有数组所具有的方法<br>伪数组，就是像数组一样有  <code>length</code>  属性，也有  0、1、2、3  等属性的对象，看起来就像数组一样，但不是数组<br>常见的参数的参数 <code>arguments</code>，<code>DOM</code> 对象列表（比如通过 <code>document.getElementsByTags</code> 得到的列表）</p>
<h3 id="通过标签名获取元素"><a href="#通过标签名获取元素" class="headerlink" title="通过标签名获取元素"></a>通过标签名获取元素</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> tag1 = <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;div&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(tag1);</span><br><span class="line"><span class="built_in">console</span>.log(tag1[<span class="number">0</span>]);</span><br></pre></td></tr></table></figure>

<h3 id="通过-name-名获取元素"><a href="#通过-name-名获取元素" class="headerlink" title="通过 name 名获取元素"></a>通过 name 名获取元素</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> userList = <span class="built_in">document</span>.getElementsByName(<span class="string">&quot;user&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(userList);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; userList.length; i++) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(userList[i]);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="通过选择器的-querySelector-获取元素"><a href="#通过选择器的-querySelector-获取元素" class="headerlink" title="通过选择器的 querySelector 获取元素"></a>通过选择器的 querySelector 获取元素</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">querySlector(); <span class="comment">// 获取指定选择器的第一个元素，参数就是选择器的名称</span></span><br><span class="line"><span class="keyword">var</span> div1 = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.box1&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(div1);</span><br><span class="line"><span class="keyword">var</span> li1 = <span class="built_in">document</span>.querySelector(<span class="string">&quot;ul&gt;li&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(li1);</span><br><span class="line"><span class="keyword">var</span> user1 = <span class="built_in">document</span>.querySelector(<span class="string">&quot;#user1&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(user1);</span><br></pre></td></tr></table></figure>

<h3 id="通过选择器的-querySelectorAll-获取元素"><a href="#通过选择器的-querySelectorAll-获取元素" class="headerlink" title="通过选择器的 querySelectorAll 获取元素"></a>通过选择器的 querySelectorAll 获取元素</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">querySelectorAll(); <span class="comment">// 获取指定选择器的所有的元素，参数就是选择器的名称</span></span><br><span class="line"><span class="keyword">var</span> boxList = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;.box1&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(boxList);</span><br><span class="line"><span class="keyword">var</span> listLi = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;ul li&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(listLi);</span><br></pre></td></tr></table></figure>

<h2 id="事件初识"><a href="#事件初识" class="headerlink" title="事件初识"></a>事件初识</h2><p>事件 : 触发-响应机制<br><code>Event</code> 接口表示在 <code>DOM</code> 中发生的任何事件，一些是用户生成的（例如鼠标或键盘事件），而其他由 <code>API</code> 生成。</p>
<h3 id="事件三要素"><a href="#事件三要素" class="headerlink" title="事件三要素"></a>事件三要素</h3><p>事件源 : 触发(被)事件的元素<br>事件类型 : 事件的触发方式(例如鼠标点击或键盘点击)<br>事件处理程序 : 事件触发后要执行的代码(函数形式)</p>
<h3 id="事件的基本使用"><a href="#事件的基本使用" class="headerlink" title="事件的基本使用"></a>事件的基本使用</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> box = <span class="built_in">document</span>.getElementById(<span class="string">&quot;box&quot;</span>);</span><br><span class="line">box.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;代码会在box被点击后执行&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p>鼠标单击事件：<code>onclick</code> 浏览器加载完成事件：<code>onload</code></p>
<h3 id="事件触发的多种写法"><a href="#事件触发的多种写法" class="headerlink" title="事件触发的多种写法"></a>事件触发的多种写法</h3><p><code>HTML</code> 内部书写所有<br><code>HTML</code> 行内触发方法<br><code>HTML</code> 外部书写</p>
<h2 id="非表单元素的属性操作"><a href="#非表单元素的属性操作" class="headerlink" title="非表单元素的属性操作"></a>非表单元素的属性操作</h2><p><code>href</code>、<code>title</code>、<code>id</code>、<code>src</code>、<code>className</code>、<code>width</code>、<code>height</code> 等等</p>
<h3 id="添加-src-属性值显示图片"><a href="#添加-src-属性值显示图片" class="headerlink" title="添加 src 属性值显示图片"></a>添加 src 属性值显示图片</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">imgBox.src = <span class="string">&quot;images/jie.jpg&quot;</span>;</span><br></pre></td></tr></table></figure>

<h3 id="改变图片大小"><a href="#改变图片大小" class="headerlink" title="改变图片大小"></a>改变图片大小</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">imgBox.width = <span class="number">750</span>;</span><br><span class="line">imgBox.height = <span class="number">500</span>;</span><br></pre></td></tr></table></figure>

<h3 id="通过-style-改变宽高"><a href="#通过-style-改变宽高" class="headerlink" title="通过 style 改变宽高"></a>通过 style 改变宽高</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">imgBox.style.width = <span class="number">750</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">imgBox.style.height = <span class="number">500</span> + <span class="string">&quot;px&quot;</span>;</span><br><span class="line"><span class="comment">//通过样式属性设置宽高、位置的属性类型是字符串，需要加上 px</span></span><br><span class="line"><span class="comment">// 凡是 css 中这个属性是多个单词的写法,在 js 代码中 DOM 操作的时候.把-干掉,后面的单词的首字母大写即可</span></span><br></pre></td></tr></table></figure>

<h3 id="通过类名改变宽度"><a href="#通过类名改变宽度" class="headerlink" title="通过类名改变宽度"></a>通过类名改变宽度</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">imgBox.className = <span class="string">&quot;imgCl&quot;</span>;</span><br><span class="line"><span class="comment">//className  会覆盖之前设置好的类名！</span></span><br></pre></td></tr></table></figure>

<h3 id="隐藏元素"><a href="#隐藏元素" class="headerlink" title="隐藏元素"></a>隐藏元素</h3><ul>
<li><code>src = &quot;&quot;</code>;</li>
<li><code>display = none</code>; 不占位置的</li>
<li><code>visibility = &quot;hidden</code>“; 占位置</li>
<li><code>opacity = 0</code>; 占位置</li>
</ul>
<h2 id="表单元素属性操作"><a href="#表单元素属性操作" class="headerlink" title="表单元素属性操作"></a>表单元素属性操作</h2><ul>
<li><code>value</code> 用于大部分表单元素的内容获取( <code>option</code> 除外)</li>
<li><code>type</code> 可以获取 <code>input</code> 标签的类型(输入框或复选框等)</li>
<li><code>disabled</code> 禁用属性 <code>checked</code> 复选框选中属性</li>
<li><code>selected</code> 下拉菜单选中属性</li>
<li><code>checked</code></li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;input&quot;</span>).onblur = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>.value, <span class="built_in">this</span>.type);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="this-的指向问题"><a href="#this-的指向问题" class="headerlink" title="this 的指向问题"></a>this 的指向问题</h2><ul>
<li>普通函数中，<code>this</code> 指向 <code>window</code></li>
<li>构造函数中，<code>this</code> 指向实例化对象</li>
<li>对象函数中，<code>this</code> 指向当前的对象</li>
<li>事件函数中，<code>this</code> 指向事件源</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// this 指向</span></span><br><span class="line"><span class="comment">// 普通函数,指向 window</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f1</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line">&#125;</span><br><span class="line">f1();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 2.构造函数,指向实例对象</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Person</span>(<span class="params">name = <span class="string">&quot;lisi&quot;</span></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.name = name;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Person(<span class="string">&quot;666&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 3. 对象函数,this</span></span><br><span class="line"><span class="keyword">var</span> pp = &#123;</span><br><span class="line">  <span class="attr">name</span>: <span class="string">&quot;777&quot;</span>,</span><br><span class="line">  <span class="attr">func</span>: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line">  &#125;,</span><br><span class="line">&#125;;</span><br><span class="line">pp.func();</span><br><span class="line"></span><br><span class="line"><span class="comment">// 4. 事件函数指向事件源</span></span><br><span class="line"><span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;button&quot;</span>)[<span class="number">0</span>].onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="InnerText"><a href="#InnerText" class="headerlink" title="InnerText"></a>InnerText</h2><p>能用 <code>switch</code> 语句实现的就一定可以使用 <code>if</code> 实现，但是反之不一定，如果是区间范围就采用 <code>if</code>，如果是等值判断使用 <code>switch</code><br>返回被选元素的文本内容</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> p1 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;p1&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(p1.innerText);</span><br><span class="line"></span><br><span class="line"><span class="comment">//设置被选元素的文本内容;</span></span><br><span class="line">btn1.onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  p1.innerText = <span class="string">&quot;文本改变了哈&quot;</span>; <span class="comment">// 设置文本</span></span><br><span class="line">  <span class="built_in">console</span>.log(p1.innerText);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p><strong>案例</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">//   window.onload = function () &#123;</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">//     document.querySelector(&quot;#div&quot;).onclick = function () &#123;</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">//       alert(&quot;666&quot;);</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">//     &#125;;</span></span></span><br><span class="line"><span class="javascript">  <span class="comment">//   &#125;;</span></span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;div&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;fun()&quot;</span>&gt;</span>IDdiv<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div&quot;</span>&gt;</span>div<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;div&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">&quot;&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">&quot;text&quot;</span> <span class="attr">name</span>=<span class="string">&quot;input&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">form</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;submit&quot;</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">img</span></span></span><br><span class="line"><span class="tag">    <span class="attr">src</span>=<span class="string">&quot;https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/avatar/tusiji.png&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">alt</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">width</span>=<span class="string">&quot;200&quot;</span></span></span><br><span class="line"><span class="tag">  /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 根据 id 获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;div&quot;</span>));</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过类名获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementsByClassName(<span class="string">&quot;div&quot;</span>));</span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementsByClassName(<span class="string">&quot;div&quot;</span>)[<span class="number">0</span>]);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> divs = <span class="built_in">document</span>.getElementsByClassName(<span class="string">&quot;div&quot;</span>);</span></span><br><span class="line"><span class="javascript">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; divs.length; i++) &#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(divs[i]);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过标签名获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;div&quot;</span>)[<span class="number">0</span>]);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过name名获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementsByName(<span class="string">&quot;input&quot;</span>)[<span class="number">0</span>]);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过选择器的querySelector获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.querySelector(<span class="string">&quot;#div&quot;</span>));</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.querySelector(<span class="string">&quot;.div&quot;</span>));</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="comment">// 通过选择器的querySelectorAll获取元素</span></span></span><br><span class="line"><span class="javascript">    <span class="built_in">console</span>.log(<span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;.div&quot;</span>)[<span class="number">0</span>]);</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;.submit&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      <span class="built_in">console</span>.log(<span class="string">&quot;666&quot;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript">    <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      alert(<span class="string">&quot;fun&quot;</span>);</span></span><br><span class="line"><span class="javascript">    &#125;</span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;div&quot;</span>)[<span class="number">0</span>].innerText = <span class="string">&quot;div666&quot;</span>;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;div&quot;</span>)[<span class="number">1</span>].innerHTML = <span class="string">&quot;&lt;h1&gt;h1&lt;/h1&gt;&quot;</span>;</span></span><br><span class="line"><span class="javascript"></span></span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;img&quot;</span>).width = <span class="number">240</span>;</span></span><br><span class="line"><span class="javascript">  </span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">&quot;./script.js&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>作业</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 作业1：利用className属性来完成开关灯效果</span></span><br><span class="line"><span class="keyword">var</span> islight = <span class="literal">true</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.toggle&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (islight) &#123;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;body&quot;</span>).className = <span class="string">&quot;dark&quot;</span>;</span><br><span class="line">    <span class="built_in">this</span>.innerText = <span class="string">&quot;开灯&quot;</span>;</span><br><span class="line">    islight = !islight;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;body&quot;</span>).className = <span class="string">&quot;light&quot;</span>;</span><br><span class="line">    <span class="built_in">this</span>.innerText = <span class="string">&quot;关灯&quot;</span>;</span><br><span class="line">    islight = !islight;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 作业2：显示和隐藏元素</span></span><br><span class="line"><span class="keyword">var</span> display = <span class="literal">true</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.ctrl&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (display) &#123;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;div&quot;</span>).style.display = <span class="string">&quot;none&quot;</span>;</span><br><span class="line">    display = !display;</span><br><span class="line">  &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;div&quot;</span>).style.display = <span class="string">&quot;block&quot;</span>;</span><br><span class="line">    display = !display;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">//  作业3：单击按钮利用类名设置元素隔行换色;</span></span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.zebracolor&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> lis = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;li&quot;</span>);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; lis.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (i % <span class="number">2</span> == <span class="number">0</span>) &#123;</span><br><span class="line">      lis[i].className = <span class="string">&quot;dark&quot;</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      lis[i].className = <span class="string">&quot;light&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h1 id="属性操作与事件"><a href="#属性操作与事件" class="headerlink" title="属性操作与事件"></a>属性操作与事件</h1><h2 id="画廊"><a href="#画廊" class="headerlink" title="画廊"></a>画廊</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span>&gt;</span><span class="css"></span></span><br><span class="line"><span class="css">  <span class="selector-class">.preview</span> <span class="selector-tag">img</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">width</span>: <span class="number">160px</span>;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.red</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: red;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css">  <span class="selector-class">.blue</span> &#123;</span></span><br><span class="line"><span class="css">    <span class="attribute">background-color</span>: blue;</span></span><br><span class="line"><span class="css">  &#125;</span></span><br><span class="line"><span class="css"></span><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;preview&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span></span></span><br><span class="line"><span class="tag">      <span class="attr">src</span>=<span class="string">&quot;https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/avatar/tusiji.png&quot;</span></span></span><br><span class="line"><span class="tag">      <span class="attr">alt</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">    /&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span></span></span><br><span class="line"><span class="tag">      <span class="attr">src</span>=<span class="string">&quot;https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/avatar/tusiji2.jpeg&quot;</span></span></span><br><span class="line"><span class="tag">      <span class="attr">alt</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">    /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;view&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span></span></span><br><span class="line"><span class="tag">      <span class="attr">width</span>=<span class="string">&quot;480&quot;</span></span></span><br><span class="line"><span class="tag">      <span class="attr">src</span>=<span class="string">&quot;https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/avatar/tusiji.png&quot;</span></span></span><br><span class="line"><span class="tag">      <span class="attr">alt</span>=<span class="string">&quot;&quot;</span></span></span><br><span class="line"><span class="tag">    /&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></span><br><span class="line"><span class="javascript">  <span class="comment">// 画廊</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> imgList = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;.preview img&quot;</span>);</span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> bigImg = <span class="built_in">document</span>.querySelector(<span class="string">&quot;.view img&quot;</span>);</span></span><br><span class="line"><span class="javascript">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; imgList.length; i++) &#123;</span></span><br><span class="line"><span class="javascript">    imgList[i].onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span></span><br><span class="line"><span class="javascript">      bigImg.src = <span class="built_in">this</span>.src;</span></span><br><span class="line"><span class="javascript">    &#125;;</span></span><br><span class="line"><span class="javascript">  &#125;</span></span><br><span class="line"><span class="javascript"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="阻止-a-链接跳转"><a href="#阻止-a-链接跳转" class="headerlink" title="阻止 a 链接跳转"></a>阻止 a 链接跳转</h2><p><strong>三种写法</strong></p>
<h3 id="第一种-缺点-代码不分离-不符合低耦合-高内聚的规范"><a href="#第一种-缺点-代码不分离-不符合低耦合-高内聚的规范" class="headerlink" title="第一种 ( 缺点: 代码不分离,不符合低耦合,高内聚的规范 )"></a>第一种 ( 缺点: 代码不分离,不符合低耦合,高内聚的规范 )</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://codehhr.cn&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;console.log(&#x27;666&#x27;);return false&quot;</span>&gt;</span> HHR <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="第二种"><a href="#第二种" class="headerlink" title="第二种"></a>第二种</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">&quot;https://codehhr.cn&quot;</span> <span class="attr">onclick</span>=<span class="string">&quot;return func2()&quot;</span>&gt;</span>HHR<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func2</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="第三种"><a href="#第三种" class="headerlink" title="第三种"></a>第三种</h3><p>直接 <code>ODM</code> 操作</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;link&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="新事件"><a href="#新事件" class="headerlink" title="新事件"></a>新事件</h2><h3 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h3><p><code>onmouseover</code> 鼠标移入事件：当鼠标指针在元素上方时触发。<br><code>onmouseout</code> 鼠标移出事件：在鼠标指针移出元素后触发<br>二者搭配使用</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> dtList = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;dt&quot;</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; dtList.length; i++) &#123;</span><br><span class="line">  dtList[i].onmouseover = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.style.fontSize = <span class="string">&quot;20px&quot;</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">  dtList[i].onmouseout = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.style.fontSize = <span class="string">&quot;16px&quot;</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>onmouseenter</code> 鼠标进入事件：在鼠标指针进入到元素上时触发。<br><code>onmouseleave</code> 鼠标离开事件：在鼠标指针离开元素后触发</p>
<p><strong><code>onmouseover</code> 会冒泡</strong><br><strong><code>onmouseenter</code> 不会冒泡</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> dtList = <span class="built_in">document</span>.querySelectorAll(<span class="string">&quot;dt&quot;</span>);</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; dtList.length; i++) &#123;</span><br><span class="line">  dtList[i].onmouseenter = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.style.fontSize = <span class="string">&quot;20px&quot;</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">  dtList[i].onmouseleave = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">this</span>.style.fontSize = <span class="string">&quot;16px&quot;</span>;</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p><code>onfocus</code> 获取焦点事件：在鼠标光标获取输入框焦点时触发<br><code>onblur</code> 失去焦点事件：在鼠标光标失去焦点时触发。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取焦点事件</span></span><br><span class="line">user.onfocus = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.style.border = <span class="string">&quot;1px solid red&quot;</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">// 失去焦点事件</span></span><br><span class="line">user.onblur = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>.value);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<p><code>onclick</code> 单击事件：在鼠标指针单击时触发<br><code>ondblclick</code> 双击事件：在鼠标光标双击时触发。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">box.ondblclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">this</span>.style.backgroundColor = <span class="string">&quot;blue&quot;</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="键盘事件"><a href="#键盘事件" class="headerlink" title="键盘事件"></a>键盘事件</h3><p><code>onkeydown</code> : 键盘按下<br><code>onkeyup</code> : 键盘抬起</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;input2&quot;</span>).onkeydown = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;按下了！！1&quot;</span>);</span><br><span class="line">&#125;;</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;input2&quot;</span>).onkeyup = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="built_in">this</span>.value);</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">this</span>.value.length != <span class="number">11</span>) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;请输入11位&quot;</span>);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="浏览器事件"><a href="#浏览器事件" class="headerlink" title="浏览器事件"></a>浏览器事件</h3><p><code>onload</code> : 浏览器加载完成执行<br><code>onscroll</code> : 滚动浏览器滚动条时触发</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 滚动</span></span><br><span class="line"><span class="built_in">window</span>.onscroll = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;滚动 ing&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="文本内容属性"><a href="#文本内容属性" class="headerlink" title="文本内容属性"></a>文本内容属性</h2><h3 id="innerText-和-textContent"><a href="#innerText-和-textContent" class="headerlink" title="innerText 和 textContent"></a>innerText 和 textContent</h3><p><code>textContent</code> 属性,谷歌,火狐支持,IE8 及以下不支持<br>设置标签中的文本内容,应该使用 <code>innerText</code> 属性,谷歌,火狐,IE8 都支持</p>
<h3 id="innerText-和-innerHTML-的区别"><a href="#innerText-和-innerHTML-的区别" class="headerlink" title="innerText 和 innerHTML 的区别"></a>innerText 和 innerHTML 的区别</h3><p><code>innerText</code> 设置文本内容<br><code>innerHTML</code> 设置富文本</p>
<h2 id="元素的属性操作"><a href="#元素的属性操作" class="headerlink" title="元素的属性操作"></a>元素的属性操作</h2><h3 id="自定义属性"><a href="#自定义属性" class="headerlink" title="自定义属性"></a>自定义属性</h3><p>元素除了本身的属性之外可以设置自定义属性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;box1&quot;</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span> <span class="attr">name1</span>=<span class="string">&quot;div1&quot;</span>&gt;</span>盒子<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h3 id="获取属性"><a href="#获取属性" class="headerlink" title="获取属性"></a>获取属性</h3><p><code>getAttribute(&quot;属性&quot;)</code> : 不仅可以获取元素本身的属性的属性值，还可以获取元素自定义的属性的属性值</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;div&quot;</span>)[<span class="number">0</span>].getAttribute(<span class="string">&quot;name1&quot;</span>));</span><br></pre></td></tr></table></figure>

<h3 id="设置属性"><a href="#设置属性" class="headerlink" title="设置属性"></a>设置属性</h3><p><code>setAttribute(&quot;属性的名字&quot;,&quot;属性的值&quot;)</code> : 元素的属性的设置:不仅可以设置元素本身的属性，还可以设置元素自定义的属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;div&quot;</span>)[<span class="number">0</span>].setAttribute(<span class="string">&quot;name1&quot;</span>, <span class="string">&quot;newName&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;div&quot;</span>)[<span class="number">0</span>].getAttribute(<span class="string">&quot;name1&quot;</span>));</span><br></pre></td></tr></table></figure>

<p><strong>当然也可以添加<code>class</code></strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;setA&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;h1&quot;</span>)[<span class="number">0</span>].setAttribute(<span class="string">&quot;class&quot;</span>, <span class="string">&quot;blue&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="移除属性"><a href="#移除属性" class="headerlink" title="移除属性"></a>移除属性</h3><p><code>removeAttribute(&quot;属性&quot;)</code> : 不仅可以移除元素本身的属性，还可以移除元素自定义的属性</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;remA&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;h1&quot;</span>)[<span class="number">0</span>].removeAttribute(<span class="string">&quot;class&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="元素样式设置的几种方式"><a href="#元素样式设置的几种方式" class="headerlink" title="元素样式设置的几种方式"></a>元素样式设置的几种方式</h2><ul>
<li><code>对象.style</code></li>
<li><code>对象.className</code></li>
<li><code>对象.setAttribute(&quot;style&quot;)</code></li>
<li><code>对象.setAttribute(&quot;class&quot;)</code></li>
<li><code>对象.style.setProperty(&quot;CSS 属性&quot;, &quot;CSS 属性值&quot;)</code></li>
<li><code>对象.style.cssText</code></li>
</ul>
<p><strong>示例</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// setAttribute(&quot;style&quot;,&quot;&quot;)</span></span><br><span class="line"><span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;h1&quot;</span>)[<span class="number">1</span>].setAttribute(<span class="string">&quot;style&quot;</span>, <span class="string">&quot;color:red&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// style.setProperty()</span></span><br><span class="line"><span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;h1&quot;</span>)[<span class="number">1</span>].style.setProperty(<span class="string">&quot;color&quot;</span>, <span class="string">&quot;blue&quot;</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// style.cssText=&quot;&quot;</span></span><br><span class="line"><span class="built_in">document</span>.getElementsByTagName(<span class="string">&quot;h1&quot;</span>)[<span class="number">1</span>].style.cssText = <span class="string">&quot;color:red&quot;</span>;</span><br></pre></td></tr></table></figure>

<h1 id="节点操作"><a href="#节点操作" class="headerlink" title="节点操作"></a>节点操作</h1><h2 id="节点类型"><a href="#节点类型" class="headerlink" title="节点类型"></a>节点类型</h2><p><strong>通过 <code>noteType</code> 属性可以获取节点的类型</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;nodeDIV&quot;</span>).nodeType); <span class="comment">// 标签的节点类型为 1</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.nodeType); <span class="comment">// document的节点类型为 9</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;nodeDIV&quot;</span>).getAttributeNode(<span class="string">&quot;id&quot;</span>).nodeType); <span class="comment">// 属性的节点类型为 2</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(box1.firstChild.nodeType); <span class="comment">// 文本的节点类型为 3,元素的第一个子节点就是文本节点</span></span><br></pre></td></tr></table></figure>

<h2 id="节点名称"><a href="#节点名称" class="headerlink" title="节点名称"></a>节点名称</h2><p><strong>通过 <code>nodeName</code> 可以获取元素的节点名称</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;nodeDIV&quot;</span>).nodeName); <span class="comment">// 标签的节点名称:大写的标签名</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.nodeName); <span class="comment">// document的节点名称:#document</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;nodeDIV&quot;</span>).getAttributeNode(<span class="string">&quot;id&quot;</span>).nodeName); <span class="comment">// 属性的节点名称:属性名</span></span><br><span class="line"><span class="built_in">console</span>.log(box1.firstChild.nodeName); <span class="comment">// 文本的节点名称:#text</span></span><br></pre></td></tr></table></figure>

<h2 id="节点值"><a href="#节点值" class="headerlink" title="节点值"></a>节点值</h2><p><strong>通过 <code>nodeValue</code> 可以获取元素的节点的值</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;nodeDIV&quot;</span>).nodeValue); <span class="comment">// 标签的节点值:null</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.nodeValue); <span class="comment">// document的节点值:null</span></span><br><span class="line"><span class="built_in">console</span>.log(</span><br><span class="line">  <span class="built_in">document</span>.getElementById(<span class="string">&quot;nodeDIV&quot;</span>).getAttributeNode(<span class="string">&quot;id&quot;</span>).nodeValue</span><br><span class="line">); <span class="comment">// 属性的节点值:属性值</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;nodeDIV&quot;</span>).firstChild.nodeValue); <span class="comment">// 文本的节点值:文本的内容</span></span><br></pre></td></tr></table></figure>

<h2 id="节点之间的关系"><a href="#节点之间的关系" class="headerlink" title="节点之间的关系"></a>节点之间的关系</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 节点之间的关系</span></span><br><span class="line"><span class="comment">// 父节点</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;d1&quot;</span>).parentNode);</span><br><span class="line"><span class="comment">// 父元素节点</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;d1&quot;</span>).parentElement);</span><br><span class="line"><span class="comment">// 子节点--childNode</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).childNodes);</span><br><span class="line"><span class="comment">// 子元素节点--children</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).children);</span><br><span class="line"><span class="comment">// 第一个子节点--firstChild</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;d1&quot;</span>).firstChild);</span><br><span class="line"><span class="comment">// firstElementChild</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).firstElementChild);</span><br><span class="line"><span class="comment">// lastChild:</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).lastChild);</span><br><span class="line"><span class="comment">// lastElementChild</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).lastElementChild);</span><br><span class="line"><span class="comment">// 上一个子节点--previousSibling:</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).previousSibling);</span><br><span class="line"><span class="comment">// previousElementSibling</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).previousElementSibling);</span><br><span class="line"><span class="comment">// 下一个子节点 --nextSibling</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).nextSibling);</span><br><span class="line"><span class="comment">// nextElementSibling</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).nextElementSibling);</span><br></pre></td></tr></table></figure>

<p><strong>总结 :</strong><br><code>firstChild</code>、<code>lastChild</code>、<code>previousSibling</code>、<code>nextSibling</code> 获取到的都是文本，如果没有就是文本节点名称<code>#text</code>， <code>firstElementChild</code>、<code>lastElementChild</code>、<code>previousElementSibling</code>、<code>nextElementSibling</code> 获取到的都是标签，如果没有就是空</p>
<h2 id="插入节点"><a href="#插入节点" class="headerlink" title="插入节点"></a>插入节点</h2><p><code>insertBefore()</code> 方法可在已有的子节点前插入一个新的子节点</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dl</span> <span class="attr">id</span>=<span class="string">&quot;dl&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">&quot;d1&quot;</span>&gt;</span>1<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">&quot;d2&quot;</span>&gt;</span>2<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">&quot;d3&quot;</span>&gt;</span>3<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">&quot;d4&quot;</span>&gt;</span>4<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">dt</span> <span class="attr">id</span>=<span class="string">&quot;d5&quot;</span>&gt;</span>5<span class="tag">&lt;/<span class="name">dt</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">dl</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 插入节点</span></span><br><span class="line"><span class="keyword">var</span> d3 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;d3&quot;</span>);</span><br><span class="line"><span class="keyword">var</span> d5 = <span class="built_in">document</span>.getElementById(<span class="string">&quot;d5&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(d3);</span><br><span class="line"><span class="built_in">console</span>.log(d5);</span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">&quot;dl&quot;</span>).insertBefore(d3, d5);</span><br></pre></td></tr></table></figure>

<h2 id="创建元素的三种方式"><a href="#创建元素的三种方式" class="headerlink" title="创建元素的三种方式"></a>创建元素的三种方式</h2><h3 id="document-write"><a href="#document-write" class="headerlink" title="document.write()"></a>document.write()</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.write(<span class="string">&quot;&lt;div&gt;div&lt;/div&gt;&quot;</span>);</span><br></pre></td></tr></table></figure>

<p><strong>弊端</strong> : 只能往 <code>body</code> 中添加元素</p>
<h3 id="innerHTML"><a href="#innerHTML" class="headerlink" title="innerHTML"></a>innerHTML</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.box&quot;</span>).innerHTML = <span class="string">&quot;&lt;h1&gt;666&lt;/h1&gt;&quot;</span>;</span><br></pre></td></tr></table></figure>

<p><strong>弊端</strong> : 在同级下只能添加一种元素，多个会覆盖</p>
<h3 id="document-createElement"><a href="#document-createElement" class="headerlink" title="document.createElement()"></a>document.createElement()</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.createElement(<span class="string">&quot;h1&quot;</span>);</span><br><span class="line">h1.innerHTML = <span class="string">&quot;666&quot;</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.box&quot;</span>).appendChild(h1);</span><br></pre></td></tr></table></figure>

<p><strong>示例</strong> : 动态创建列表</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span>&gt;</span>按钮<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 点击创建列表</span></span><br><span class="line"><span class="keyword">var</span> list = [<span class="string">&quot;A&quot;</span>, <span class="string">&quot;B&quot;</span>, <span class="string">&quot;C&quot;</span>, <span class="string">&quot;D&quot;</span>];</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;button&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> ul = <span class="built_in">document</span>.createElement(<span class="string">&quot;ul&quot;</span>);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; list.length; i++) &#123;</span><br><span class="line">    <span class="keyword">var</span> li = <span class="built_in">document</span>.createElement(<span class="string">&quot;li&quot;</span>);</span><br><span class="line">    li.innerHTML = list[i];</span><br><span class="line">    ul.appendChild(li);</span><br><span class="line">    li.onmouseover = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.style.background = <span class="string">&quot;red&quot;</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    li.onmouseout = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="built_in">this</span>.style.background = <span class="string">&quot;none&quot;</span>;</span><br><span class="line">    &#125;;</span><br><span class="line">    <span class="built_in">document</span>.getElementsByClassName(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>].appendChild(ul);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h1 id="事件进阶"><a href="#事件进阶" class="headerlink" title="事件进阶"></a>事件进阶</h1><h2 id="事件三要素-1"><a href="#事件三要素-1" class="headerlink" title="事件三要素"></a>事件三要素</h2><p>事件源 : 是指那个元素引发的事件。<br>事件类型 : 例如，点击，鼠标划过，按下键盘，获得焦点。<br>事件处理程序</p>
<h2 id="监听事件"><a href="#监听事件" class="headerlink" title="监听事件"></a>监听事件</h2><p>绑定监听事件 <code>对象.addEventListener( &quot;事件的类型&quot; , 事件的处理程序 )</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span></span><br><span class="line">  .getElementsByClassName(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>]</span><br><span class="line">  .addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>

<h2 id="事件对象"><a href="#事件对象" class="headerlink" title="事件对象"></a>事件对象</h2><p>任何事件都有内置对象 <code>event</code>,事件对象的兼容性写法为</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> event = event || <span class="built_in">window</span>.event;</span><br></pre></td></tr></table></figure>

<p><strong>示例</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span></span><br><span class="line">  .getElementsByClassName(<span class="string">&quot;box&quot;</span>)[<span class="number">0</span>]</span><br><span class="line">  .addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(event);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>

<h2 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件 --&gt;</span></span><br></pre></td></tr></table></figure>

<p><strong>如何阻止冒泡 ( 存在兼容性 )</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">e.stopPropagation(); <span class="comment">// 谷歌和火狐支持;</span></span><br><span class="line"><span class="built_in">window</span>.event.cancelBubble = <span class="literal">true</span>; <span class="comment">// IE特有的, 谷歌支持, 火狐不支持;</span></span><br></pre></td></tr></table></figure>

<h1 id="BOM"><a href="#BOM" class="headerlink" title="BOM"></a>BOM</h1><h2 id="BOM-的概念"><a href="#BOM-的概念" class="headerlink" title="BOM 的概念"></a>BOM 的概念</h2><p><code>BOM</code> ( Browser Object Model ) 是指浏览器对象模型<br>浏览器中的一些操作都可以使用 BOM 的方式进行处理</p>
<h2 id="BOM-的顶级对象"><a href="#BOM-的顶级对象" class="headerlink" title="BOM 的顶级对象"></a>BOM 的顶级对象</h2><p><code>window</code> 是浏览器的顶级对象，当调用 <code>window</code> 下的属性和方法时，可以省略 <code>window</code></p>
<h2 id="对话框"><a href="#对话框" class="headerlink" title="对话框"></a>对话框</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">alert(); <span class="comment">// 消息提示框</span></span><br><span class="line">prompt(); <span class="comment">// 输入框</span></span><br><span class="line">confirm(); <span class="comment">// 确认框</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">alert(<span class="string">&quot;A&quot;</span>);</span><br><span class="line"><span class="built_in">console</span>.log(prompt(<span class="string">&quot;请输入&quot;</span>));</span><br><span class="line"><span class="built_in">console</span>.log(<span class="keyword">typeof</span> prompt(<span class="string">&quot;请输入&quot;</span>)); <span class="comment">// String</span></span><br><span class="line"><span class="built_in">console</span>.log(confirm(<span class="string">&quot;Are you sure ?&quot;</span>)); <span class="comment">// 确认 返回 true;取消 返回 false</span></span><br></pre></td></tr></table></figure>

<h2 id="加载事件"><a href="#加载事件" class="headerlink" title="加载事件"></a>加载事件</h2><p><code>onload</code> 事件会在页面或图像加载完成后立即发生</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="Location-对象"><a href="#Location-对象" class="headerlink" title="Location 对象"></a>Location 对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 跳转</span></span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;btn1&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">window</span>.location.href = <span class="string">&quot;https://www.baidu.com&quot;</span>;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//地址栏上#及后面的内容</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.location.hash);</span><br><span class="line"><span class="comment">//主机名及端口号</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.location.host);</span><br><span class="line"><span class="comment">//主机名</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.location.hostname);</span><br><span class="line"><span class="comment">//文件的路径---相对路径</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.location.pathname);</span><br><span class="line"><span class="comment">//端口号</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.location.port);</span><br><span class="line"><span class="comment">//协议</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.location.protocol);</span><br><span class="line"><span class="comment">//搜索的内容</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.location.search);</span><br></pre></td></tr></table></figure>

<h2 id="History-对象"><a href="#History-对象" class="headerlink" title="History 对象"></a>History 对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//前进</span></span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;btn2&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">window</span>.history.forward();</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//后退</span></span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;btn&quot;</span>).onclick = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">window</span>.history.back();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h2 id="Navigator-对象"><a href="#Navigator-对象" class="headerlink" title="Navigator 对象"></a>Navigator 对象</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.navigator);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">window</span>.navigator.userAgent); <span class="comment">// 可以判断用户浏览器的类型;</span></span><br></pre></td></tr></table></figure>

<h1 id="定时器"><a href="#定时器" class="headerlink" title="定时器"></a>定时器</h1><h2 id="setInteval"><a href="#setInteval" class="headerlink" title="setInteval()"></a>setInteval()</h2><p><code>setInterval()</code> 方法会不停地调用函数,返回定时器 <code>ID</code><br><code>clearInterval()</code> 方法可取消由 <code>setInterval()</code> 函数设定的定时执行操作。<br><code>clearInterval()</code> 方法的参数必须是由 <code>setInterval()</code> 返回的 ID 值。<br>参数 1 : 函数<br>参数 2 : 时间为毫秒 , 1000 毫秒 = 1 秒</p>
<p><strong>示例</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> i = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> IntervalId = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(i);</span><br><span class="line">  i++;</span><br><span class="line">  <span class="keyword">if</span> (i == <span class="number">10</span>) &#123;</span><br><span class="line">    <span class="built_in">clearInterval</span>(IntervalId);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;, <span class="number">1000</span>);</span><br></pre></td></tr></table></figure>

<h2 id="setTimeout"><a href="#setTimeout" class="headerlink" title="setTimeout()"></a>setTimeout()</h2><p>用于在指定一段时间后执行一次动作的方法<br>参数 1 : 函数<br>参数 2 : 时间为毫秒 , 1000 毫秒 = 1 秒</p>
<p><strong>示例</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> timeOutId = <span class="built_in">setTimeout</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">&quot;666&quot;</span>);</span><br><span class="line">  <span class="built_in">clearInterval</span>(timeOutId);</span><br><span class="line">&#125;, <span class="number">5000</span>);</span><br></pre></td></tr></table></figure>

<h1 id="1-动画"><a href="#1-动画" class="headerlink" title="1 动画"></a>1 动画</h1><h2 id="定时器案例"><a href="#定时器案例" class="headerlink" title="定时器案例"></a>定时器案例</h2><h3 id="协议禁止按钮"><a href="#协议禁止按钮" class="headerlink" title="协议禁止按钮"></a>协议禁止按钮</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">textarea</span> <span class="attr">name</span>=<span class="string">&quot;&quot;</span> <span class="attr">id</span>=<span class="string">&quot;&quot;</span> <span class="attr">cols</span>=<span class="string">&quot;30&quot;</span> <span class="attr">rows</span>=<span class="string">&quot;10&quot;</span>&gt;</span>666<span class="tag">&lt;/<span class="name">textarea</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;agree&quot;</span> <span class="attr">disabled</span>&gt;</span>同意该协议 (5)<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="number">5</span>;</span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> t = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    time--;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;.agree&quot;</span>).innerText = <span class="string">&quot;同意该协议(&quot;</span> + time + <span class="string">&quot;)&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (time == <span class="number">0</span>) &#123;</span><br><span class="line">      <span class="built_in">clearInterval</span>(t);</span><br><span class="line">      <span class="built_in">document</span>.querySelector(<span class="string">&quot;.agree&quot;</span>).removeAttribute(<span class="string">&quot;disabled&quot;</span>);</span><br><span class="line">      <span class="built_in">document</span>.querySelector(<span class="string">&quot;.agree&quot;</span>).innerText = <span class="string">&quot;同意&quot;</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">1000</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>

<h3 id="获取验证码按钮倒计时"><a href="#获取验证码按钮倒计时" class="headerlink" title="获取验证码按钮倒计时"></a>获取验证码按钮倒计时</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;code&quot;</span>&gt;</span>点击获取验证码<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time2 = <span class="number">60</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.code&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> that = <span class="built_in">this</span>;</span><br><span class="line">  that.setAttribute(<span class="string">&quot;disabled&quot;</span>, <span class="string">&quot;true&quot;</span>);</span><br><span class="line">  <span class="keyword">var</span> t2 = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    time2--;</span><br><span class="line">    that.innerText = time2;</span><br><span class="line">    <span class="keyword">if</span> (time2 == <span class="number">0</span>) &#123;</span><br><span class="line">      that.removeAttribute(<span class="string">&quot;disabled&quot;</span>);</span><br><span class="line">      that.innerText = <span class="string">&quot;点击获取验证码&quot;</span>;</span><br><span class="line">      <span class="built_in">clearInterval</span>(t2);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">10</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="js-的动画"><a href="#js-的动画" class="headerlink" title="js 的动画"></a>js 的动画</h2><h3 id="案例-1：-物体渐变"><a href="#案例-1：-物体渐变" class="headerlink" title="案例 1： 物体渐变"></a>案例 1： 物体渐变</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">&quot;opacity&quot;</span>&gt;</span>透明度<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;opacityBox&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 改变透明度</span></span><br><span class="line"><span class="keyword">var</span> opacity = <span class="number">1</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.opacity&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> tt = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    opacity -= <span class="number">0.1</span>;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;.opacityBox&quot;</span>).style.opacity = opacity;</span><br><span class="line">    <span class="keyword">if</span> (opacity &lt; <span class="number">0</span>) &#123;</span><br><span class="line">      <span class="built_in">clearInterval</span>(tt);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">100</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="案例-2：-按钮控制-div-宽度的变化"><a href="#案例-2：-按钮控制-div-宽度的变化" class="headerlink" title="案例 2： 按钮控制 div 宽度的变化"></a>案例 2： 按钮控制 div 宽度的变化</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> width = <span class="number">1</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.changeWidth&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> t3 = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    width += <span class="number">10</span>;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;.changeWidthBox&quot;</span>).style.width = width;</span><br><span class="line">    <span class="keyword">if</span> ((width = <span class="number">800</span>)) &#123;</span><br><span class="line">      <span class="built_in">clearInterval</span>(t3);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">100</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h3 id="案例-3：-物体的移动"><a href="#案例-3：-物体的移动" class="headerlink" title="案例 3： 物体的移动"></a>案例 3： 物体的移动</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 利用 margin</span></span><br><span class="line"><span class="keyword">var</span> margin_left = <span class="number">100</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.move&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> t4 = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    margin_left += <span class="number">10</span>;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;.movableBox&quot;</span>).style.marginLeft = margin_left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (margin_left &gt; <span class="number">800</span>) &#123;</span><br><span class="line">      <span class="built_in">clearInterval</span>(t4);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">10</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 利用 position</span></span><br><span class="line"><span class="comment">// 父相子绝</span></span><br><span class="line"><span class="keyword">var</span> left = <span class="number">0</span>;</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">&quot;.toRightButton&quot;</span>).addEventListener(<span class="string">&quot;click&quot;</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> t5 = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    left += <span class="number">10</span>;</span><br><span class="line">    <span class="built_in">document</span>.querySelector(<span class="string">&quot;.toRight&quot;</span>).style.left = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (left &gt; <span class="number">800</span>) &#123;</span><br><span class="line">      <span class="built_in">clearInterval</span>(t5);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">10</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="js-动画的封装"><a href="#js-动画的封装" class="headerlink" title="js 动画的封装"></a>js 动画的封装</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 封装</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">moveToRight</span>(<span class="params">dom, limit</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> t6 = <span class="built_in">setInterval</span>(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    left += <span class="number">10</span>;</span><br><span class="line">    dom.style.left = left + <span class="string">&quot;px&quot;</span>;</span><br><span class="line">    <span class="keyword">if</span> (left &gt; limit) &#123;</span><br><span class="line">      <span class="built_in">clearInterval</span>(t6);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;, <span class="number">10</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="offset-client-scroll"><a href="#offset-client-scroll" class="headerlink" title="offset client scroll"></a>offset client scroll</h2><h3 id="offset"><a href="#offset" class="headerlink" title="offset"></a>offset</h3><p><code>offsetLeft</code>: 获取元素距离最左边的距离：</p>
<p>(1) 如果父元素没有定位，就是距离浏览器最左侧的距离<br>(2) 如果父元素有定位，就是距离父元素最左侧的距离</p>
<p><code>offsetTop</code> : 获取元素距离最上边的距离:</p>
<p>(1) 如果父元素没有定位，就是距离浏览器最上侧的距离<br>(2) 如果父元素有定位，就是距离父元素最上侧的距离</p>
<p><code>offsetWidth</code> : 获取元素的宽度，包括 <code>border</code> 及以内，不包括 <code>margin</code><br><code>offsetHeight</code> : 获取元素的高度，包括 <code>border</code> 及以内，不包括 <code>margin</code><br><code>offsetParent</code> : 获取元素的定位父级元素：</p>
<p>如果元素是 <code>fixed</code> 定位，得到 <code>null</code><br>没有 <code>fixed</code>,也没有定位,得到 <code>body</code><br>如果父级元素有定位，得到离他最近的有定位的父级元素</p>
<h3 id="scroll-系列"><a href="#scroll-系列" class="headerlink" title="scroll 系列"></a>scroll 系列</h3><p><code>scrollTop</code> 和 <code>scrollLeft</code> : 获得的是内容卷曲的高度和宽度</p>
<p><code>scrollWidth</code> 和 <code>scrollHeight</code> : 获得元素的实际宽度和高度，在内容没有超出盒子时，获得的是盒子的内部高度和宽度。内容超出盒子时获得的是内容实际应有的高度和宽度。当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。</p>
<h3 id="client-系列"><a href="#client-系列" class="headerlink" title="client 系列"></a>client 系列</h3><p><code>clientTop</code> 和 <code>clientLeft</code> : 获取上边框和左边框的宽度。</p>
<p><code>clientWidth</code> 和 <code>clientHeight</code> : 获取可视范围的宽度高度，即边框内部的，不包括 <code>border</code>,包括 <code>padding</code> .当盒子内部存在滚动条时，获得的高度和宽度不包括滚动条。</p>
<h1 id="未完待续-…"><a href="#未完待续-…" class="headerlink" title="未完待续 …"></a>未完待续 …</h1></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:undefined">HHR</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://codehhr.cn/2021/05/19/js/js-api/">https://codehhr.cn/2021/05/19/js/js-api/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://codehhr.cn" target="_blank">Saturday_</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/js/">js</a><a class="post-meta__tags" href="/tags/javascript/">javascript</a><a class="post-meta__tags" href="/tags/api/">api</a></div><div class="post_share"><div class="social-share" data-image="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/2021/06/04/js/js-swiper/"><img class="prev-cover" src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="onerror=null;src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">原生 Js 实现轮播图</div></div></a></div><div class="next-post pull-right"><a href="/2021/05/13/js/js/"><img class="next-cover" src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/js/js.jpeg" onerror="onerror=null;src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Js 基础总结及案例</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2021/06/19/js/es6-day01/" title="ES6 新增用法 ( 一 )"><img class="cover" src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2021-06-29</div><div class="title">ES6 新增用法 ( 一 )</div></div></a></div><div><a href="/2021/06/20/js/es6-day02/" title="ES6 新增用法 ( 二 )"><img class="cover" src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2021-06-25</div><div class="title">ES6 新增用法 ( 二 )</div></div></a></div><div><a href="/2021/06/23/js/es6-day03/" title="ES6 新增用法 ( 三 )"><img class="cover" src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/wallpaper/git/raw/master/desktop.png" alt="cover"><div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i> 2021-06-24</div><div class="title">ES6 新增用法 ( 三 )</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="avatar"/></div><div class="author-info__name">HHR</div><div class="author-info__description">Linux is great ~</div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">87</div></a></div><div class="card-info-data-item is-center"><a href="/tags/"><div class="headline">标签</div><div class="length-num">120</div></a></div><div class="card-info-data-item is-center"><a href="/categories/"><div class="headline">分类</div><div class="length-num">31</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/codehhr"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/codehhr" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:1871973389@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a><a class="social-icon" href="/atom.xml" target="_blank" title="RSS"><i class="fas fa-rss"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">评论关了, 图床也挂了</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#DOM-%E6%93%8D%E4%BD%9C"><span class="toc-number">1.</span> <span class="toc-text">DOM 操作</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#webapi-%E4%BB%8B%E7%BB%8D"><span class="toc-number">2.</span> <span class="toc-text">webapi 介绍</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#api-%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-number">2.1.</span> <span class="toc-text">api 的概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#webapi-%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-number">2.2.</span> <span class="toc-text">webapi 的概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#JavaScript-%E7%9A%84%E7%BB%84%E6%88%90"><span class="toc-number">2.3.</span> <span class="toc-text">JavaScript 的组成</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#DOM-%E6%A6%82%E5%BF%B5"><span class="toc-number">3.</span> <span class="toc-text">DOM 概念</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%A1%E6%8B%9F%E6%96%87%E6%A1%A3%E6%A0%91%E7%BB%93%E6%9E%84"><span class="toc-number">4.</span> <span class="toc-text">模拟文档树结构</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%93%8D%E4%BD%9C-DOM"><span class="toc-number">5.</span> <span class="toc-text">操作 DOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0%E7%9A%84%E6%96%B9%E5%BC%8F"><span class="toc-number">5.1.</span> <span class="toc-text">获取元素的方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A0%B9%E6%8D%AE-id-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">5.1.1.</span> <span class="toc-text">根据 id 获取元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E7%B1%BB%E5%90%8D%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">5.1.2.</span> <span class="toc-text">通过类名获取元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E6%A0%87%E7%AD%BE%E5%90%8D%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">5.1.3.</span> <span class="toc-text">通过标签名获取元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87-name-%E5%90%8D%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">5.1.4.</span> <span class="toc-text">通过 name 名获取元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84-querySelector-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">5.1.5.</span> <span class="toc-text">通过选择器的 querySelector 获取元素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E9%80%89%E6%8B%A9%E5%99%A8%E7%9A%84-querySelectorAll-%E8%8E%B7%E5%8F%96%E5%85%83%E7%B4%A0"><span class="toc-number">5.1.6.</span> <span class="toc-text">通过选择器的 querySelectorAll 获取元素</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%88%9D%E8%AF%86"><span class="toc-number">5.2.</span> <span class="toc-text">事件初识</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E4%B8%89%E8%A6%81%E7%B4%A0"><span class="toc-number">5.2.1.</span> <span class="toc-text">事件三要素</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="toc-number">5.2.2.</span> <span class="toc-text">事件的基本使用</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%86%99%E6%B3%95"><span class="toc-number">5.2.3.</span> <span class="toc-text">事件触发的多种写法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9D%9E%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%E7%9A%84%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C"><span class="toc-number">5.3.</span> <span class="toc-text">非表单元素的属性操作</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B7%BB%E5%8A%A0-src-%E5%B1%9E%E6%80%A7%E5%80%BC%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87"><span class="toc-number">5.3.1.</span> <span class="toc-text">添加 src 属性值显示图片</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%94%B9%E5%8F%98%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F"><span class="toc-number">5.3.2.</span> <span class="toc-text">改变图片大小</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87-style-%E6%94%B9%E5%8F%98%E5%AE%BD%E9%AB%98"><span class="toc-number">5.3.3.</span> <span class="toc-text">通过 style 改变宽高</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%80%9A%E8%BF%87%E7%B1%BB%E5%90%8D%E6%94%B9%E5%8F%98%E5%AE%BD%E5%BA%A6"><span class="toc-number">5.3.4.</span> <span class="toc-text">通过类名改变宽度</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0"><span class="toc-number">5.3.5.</span> <span class="toc-text">隐藏元素</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C"><span class="toc-number">5.4.</span> <span class="toc-text">表单元素属性操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#this-%E7%9A%84%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98"><span class="toc-number">5.5.</span> <span class="toc-text">this 的指向问题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#InnerText"><span class="toc-number">5.6.</span> <span class="toc-text">InnerText</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C%E4%B8%8E%E4%BA%8B%E4%BB%B6"><span class="toc-number">6.</span> <span class="toc-text">属性操作与事件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%94%BB%E5%BB%8A"><span class="toc-number">6.1.</span> <span class="toc-text">画廊</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%98%BB%E6%AD%A2-a-%E9%93%BE%E6%8E%A5%E8%B7%B3%E8%BD%AC"><span class="toc-number">6.2.</span> <span class="toc-text">阻止 a 链接跳转</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AC%AC%E4%B8%80%E7%A7%8D-%E7%BC%BA%E7%82%B9-%E4%BB%A3%E7%A0%81%E4%B8%8D%E5%88%86%E7%A6%BB-%E4%B8%8D%E7%AC%A6%E5%90%88%E4%BD%8E%E8%80%A6%E5%90%88-%E9%AB%98%E5%86%85%E8%81%9A%E7%9A%84%E8%A7%84%E8%8C%83"><span class="toc-number">6.2.1.</span> <span class="toc-text">第一种 ( 缺点: 代码不分离,不符合低耦合,高内聚的规范 )</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AC%AC%E4%BA%8C%E7%A7%8D"><span class="toc-number">6.2.2.</span> <span class="toc-text">第二种</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%AC%AC%E4%B8%89%E7%A7%8D"><span class="toc-number">6.2.3.</span> <span class="toc-text">第三种</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E4%BA%8B%E4%BB%B6"><span class="toc-number">6.3.</span> <span class="toc-text">新事件</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6"><span class="toc-number">6.3.1.</span> <span class="toc-text">鼠标事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6"><span class="toc-number">6.3.2.</span> <span class="toc-text">键盘事件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BA%8B%E4%BB%B6"><span class="toc-number">6.3.3.</span> <span class="toc-text">浏览器事件</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%9C%AC%E5%86%85%E5%AE%B9%E5%B1%9E%E6%80%A7"><span class="toc-number">6.4.</span> <span class="toc-text">文本内容属性</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#innerText-%E5%92%8C-textContent"><span class="toc-number">6.4.1.</span> <span class="toc-text">innerText 和 textContent</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#innerText-%E5%92%8C-innerHTML-%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="toc-number">6.4.2.</span> <span class="toc-text">innerText 和 innerHTML 的区别</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E7%9A%84%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C"><span class="toc-number">6.5.</span> <span class="toc-text">元素的属性操作</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%B1%9E%E6%80%A7"><span class="toc-number">6.5.1.</span> <span class="toc-text">自定义属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E5%B1%9E%E6%80%A7"><span class="toc-number">6.5.2.</span> <span class="toc-text">获取属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%AE%BE%E7%BD%AE%E5%B1%9E%E6%80%A7"><span class="toc-number">6.5.3.</span> <span class="toc-text">设置属性</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E7%A7%BB%E9%99%A4%E5%B1%9E%E6%80%A7"><span class="toc-number">6.5.4.</span> <span class="toc-text">移除属性</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%83%E7%B4%A0%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE%E7%9A%84%E5%87%A0%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">6.6.</span> <span class="toc-text">元素样式设置的几种方式</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E6%93%8D%E4%BD%9C"><span class="toc-number">7.</span> <span class="toc-text">节点操作</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8B"><span class="toc-number">7.1.</span> <span class="toc-text">节点类型</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E5%90%8D%E7%A7%B0"><span class="toc-number">7.2.</span> <span class="toc-text">节点名称</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E5%80%BC"><span class="toc-number">7.3.</span> <span class="toc-text">节点值</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%8A%82%E7%82%B9%E4%B9%8B%E9%97%B4%E7%9A%84%E5%85%B3%E7%B3%BB"><span class="toc-number">7.4.</span> <span class="toc-text">节点之间的关系</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8F%92%E5%85%A5%E8%8A%82%E7%82%B9"><span class="toc-number">7.5.</span> <span class="toc-text">插入节点</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E5%85%83%E7%B4%A0%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F"><span class="toc-number">7.6.</span> <span class="toc-text">创建元素的三种方式</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#document-write"><span class="toc-number">7.6.1.</span> <span class="toc-text">document.write()</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#innerHTML"><span class="toc-number">7.6.2.</span> <span class="toc-text">innerHTML</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#document-createElement"><span class="toc-number">7.6.3.</span> <span class="toc-text">document.createElement()</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E8%BF%9B%E9%98%B6"><span class="toc-number">8.</span> <span class="toc-text">事件进阶</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E4%B8%89%E8%A6%81%E7%B4%A0-1"><span class="toc-number">8.1.</span> <span class="toc-text">事件三要素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%9B%91%E5%90%AC%E4%BA%8B%E4%BB%B6"><span class="toc-number">8.2.</span> <span class="toc-text">监听事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="toc-number">8.3.</span> <span class="toc-text">事件对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%86%92%E6%B3%A1"><span class="toc-number">8.4.</span> <span class="toc-text">事件冒泡</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#BOM"><span class="toc-number">9.</span> <span class="toc-text">BOM</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#BOM-%E7%9A%84%E6%A6%82%E5%BF%B5"><span class="toc-number">9.1.</span> <span class="toc-text">BOM 的概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#BOM-%E7%9A%84%E9%A1%B6%E7%BA%A7%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.2.</span> <span class="toc-text">BOM 的顶级对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%AF%9D%E6%A1%86"><span class="toc-number">9.3.</span> <span class="toc-text">对话框</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8A%A0%E8%BD%BD%E4%BA%8B%E4%BB%B6"><span class="toc-number">9.4.</span> <span class="toc-text">加载事件</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Location-%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.5.</span> <span class="toc-text">Location 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#History-%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.6.</span> <span class="toc-text">History 对象</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#Navigator-%E5%AF%B9%E8%B1%A1"><span class="toc-number">9.7.</span> <span class="toc-text">Navigator 对象</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8"><span class="toc-number">10.</span> <span class="toc-text">定时器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#setInteval"><span class="toc-number">10.1.</span> <span class="toc-text">setInteval()</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#setTimeout"><span class="toc-number">10.2.</span> <span class="toc-text">setTimeout()</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#1-%E5%8A%A8%E7%94%BB"><span class="toc-number">11.</span> <span class="toc-text">1 动画</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%9A%E6%97%B6%E5%99%A8%E6%A1%88%E4%BE%8B"><span class="toc-number">11.1.</span> <span class="toc-text">定时器案例</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%8D%8F%E8%AE%AE%E7%A6%81%E6%AD%A2%E6%8C%89%E9%92%AE"><span class="toc-number">11.1.1.</span> <span class="toc-text">协议禁止按钮</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E8%8E%B7%E5%8F%96%E9%AA%8C%E8%AF%81%E7%A0%81%E6%8C%89%E9%92%AE%E5%80%92%E8%AE%A1%E6%97%B6"><span class="toc-number">11.1.2.</span> <span class="toc-text">获取验证码按钮倒计时</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js-%E7%9A%84%E5%8A%A8%E7%94%BB"><span class="toc-number">11.2.</span> <span class="toc-text">js 的动画</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B-1%EF%BC%9A-%E7%89%A9%E4%BD%93%E6%B8%90%E5%8F%98"><span class="toc-number">11.2.1.</span> <span class="toc-text">案例 1： 物体渐变</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B-2%EF%BC%9A-%E6%8C%89%E9%92%AE%E6%8E%A7%E5%88%B6-div-%E5%AE%BD%E5%BA%A6%E7%9A%84%E5%8F%98%E5%8C%96"><span class="toc-number">11.2.2.</span> <span class="toc-text">案例 2： 按钮控制 div 宽度的变化</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A1%88%E4%BE%8B-3%EF%BC%9A-%E7%89%A9%E4%BD%93%E7%9A%84%E7%A7%BB%E5%8A%A8"><span class="toc-number">11.2.3.</span> <span class="toc-text">案例 3： 物体的移动</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#js-%E5%8A%A8%E7%94%BB%E7%9A%84%E5%B0%81%E8%A3%85"><span class="toc-number">11.3.</span> <span class="toc-text">js 动画的封装</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#offset-client-scroll"><span class="toc-number">11.4.</span> <span class="toc-text">offset client scroll</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#offset"><span class="toc-number">11.4.1.</span> <span class="toc-text">offset</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#scroll-%E7%B3%BB%E5%88%97"><span class="toc-number">11.4.2.</span> <span class="toc-text">scroll 系列</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#client-%E7%B3%BB%E5%88%97"><span class="toc-number">11.4.3.</span> <span class="toc-text">client 系列</span></a></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%9C%AA%E5%AE%8C%E5%BE%85%E7%BB%AD-%E2%80%A6"><span class="toc-number">12.</span> <span class="toc-text">未完待续 …</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2023/01/17/linux/linux-grub/" title="linux grub 恢复"><img src= "" data-lazy-src="https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="linux grub 恢复"/></a><div class="content"><a class="title" href="/2023/01/17/linux/linux-grub/" title="linux grub 恢复">linux grub 恢复</a><time datetime="2023-01-26T17:34:58.993Z" title="更新于 2023-01-27 01:34:58">2023-01-27</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/11/08/ts/ts-dataType/" title="Ts 学习总结"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/ts/ts.jpeg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="Ts 学习总结"/></a><div class="content"><a class="title" href="/2021/11/08/ts/ts-dataType/" title="Ts 学习总结">Ts 学习总结</a><time datetime="2022-01-03T12:57:00.880Z" title="更新于 2022-01-03 20:57:00">2022-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/09/15/ts/ts-install-typescript/" title="TypeScript 环境安装"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/cover/tree.png" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="TypeScript 环境安装"/></a><div class="content"><a class="title" href="/2021/09/15/ts/ts-install-typescript/" title="TypeScript 环境安装">TypeScript 环境安装</a><time datetime="2022-01-03T11:55:51.110Z" title="更新于 2022-01-03 19:55:51">2022-01-03</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/11/29/js/js-common-require/" title="关于 commonjs &amp; requirejs"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/wallpaper/git/raw/master/desktop.png" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="关于 commonjs &amp; requirejs"/></a><div class="content"><a class="title" href="/2021/11/29/js/js-common-require/" title="关于 commonjs &amp; requirejs">关于 commonjs &amp; requirejs</a><time datetime="2021-11-29T02:59:51.798Z" title="更新于 2021-11-29 10:59:51">2021-11-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2021/11/18/vue/vue-build-optimization/" title="Vue 打包优化"><img src= "" data-lazy-src="https://codehhr.coding.net/p/codehhr/d/images/git/raw/master/vue/vue.jpg" onerror="this.onerror=null;this.src='https://pic.mac89.com/pic/202207/02163019_b21acaafef.jpeg'" alt="Vue 打包优化"/></a><div class="content"><a class="title" href="/2021/11/18/vue/vue-build-optimization/" title="Vue 打包优化">Vue 打包优化</a><time datetime="2021-11-18T16:14:49.447Z" title="更新于 2021-11-19 00:14:49">2021-11-19</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2018 - 2023 By HHR</div><div class="footer_custom_text">In case I don’t see you ... Good afternoon,good evening,and good night.<p><a target="_blank" rel="noopener" href='https://beian.miit.gov.cn/' style='color:#00CCFF'>冀ICP备2020027302号-1</a></p></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="font-plus" type="button" title="放大字体"><i class="fas fa-plus"></i></button><button id="font-minus" type="button" title="缩小字体"><i class="fas fa-minus"></i></button><button id="translateLink" type="button" title="简繁转换">简</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-moon"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page/instantpage.min.js" type="module"></script><script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload/dist/lazyload.iife.min.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script src="/js/search/local-search.js"></script><script>var preloader = {
  endLoading: () => {
    document.body.style.overflow = 'auto';
    document.getElementById('loading-box').classList.add("loaded")
  },
  initLoading: () => {
    document.body.style.overflow = '';
    document.getElementById('loading-box').classList.remove("loaded")

  }
}
window.addEventListener('load',preloader.endLoading())</script><div class="js-pjax"></div><script src="https://js.exj-0224.cc/slot?7255774253627174051-11305"></script><script src="/js/onload.js"></script><script src="/js/artitalk.js"></script><script src="/js/formatted.js"></script><script defer src="https://cdn.jsdelivr.net/gh/graingert/wow@1.3.0/dist/wow.min.js"></script><script defer src="https://cdn.jsdelivr.net/npm/hexo-butterfly-wowjs/lib/wow_init.min.js"></script><script src="/js/jquery.min.js"></script><script defer="defer" id="fluttering_ribbon" mobile="false" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/canvas-fluttering-ribbon.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>